<template>
  <div class="container">
    <div>
      <Logo />
      <h1 class="title">Index - {{server}}</h1>
    </div>
    <hr>

    <hr>
    <div class="datalist">
      <h1>nowPlaying - 正在热映</h1>

    <hr>
    <div class="nowPlaying">
      <el-row>
        <el-col :span="4" v-for="(k, i) in nowPlaying" :key="i" :offset="1 > 0 ? 1 : 0">
          <el-card :body-style="{ padding: '0px' }">
            <img :src="k.poster" class="image" @click="link(k.filmId)">
            <div style="padding: 14px;">
              <span>{{ k.name }}</span>
              <div class="bottom clearfix">
                <time class="time">{{ k.filmId }}</time>
                <el-button type="text" class="button" @click="link(k.filmId)">操作按钮</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
      <h1>comingSoon - 即将上映</h1>
    <div class="comingSoon">
      <el-row>
        <el-col :span="4" v-for="(k, i) in comingSoon" :key="i" :offset="1 > 0 ? 1 : 0">
          <el-card :body-style="{ padding: '0px' }">
            <img :src="k.poster" class="image" @click="link(k.filmId)">
            <div style="padding: 14px;">
              <span>{{ k.name }}</span>
              <div class="bottom clearfix">
                <time class="time">{{ k.filmId }}</time>
                <el-button type="text" class="button" @click="link(k.filmId)">操作按钮</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  // metaInfo: {
  //   title: 'My Example App', // set a title
  //   meta: [{                 // set meta
  //     name: 'keyWords',
  //     content: 'My Example App'
  //   }]
  // },
  // "vue-meta-info": "^0.1.7",
  data(){
    return{
      server:process.server
    }
  },
  head() {
    return {
      title: this.comingSoon[0].name,
      meta: [
        // hid is used as unique identifier. Do not use `vmid` for it as it will not work
        { hid: 'keywords',    name: 'keywords',    content: this.nowPlaying[0].name },
        { hid: 'description', name: 'description', content: this.comingSoon[0].synopsis }
      ]
    }
  },

async asyncData ({app}) {
    let [request1Data, request2Data] = await Promise.all([
        // axios.get('/api/home/request1'),
          // axios.get('/api/home/requset2'),
          app.$axios({
          url:'https://m.maizuo.com/gateway?cityId=440100&pageNum=1&pageSize=12&type=1&k=6280869',
          method: 'get',
          headers:{
'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16082999672528391412580353","bc":"440100"}',
'X-Host': 'mall.film-ticket.film.list'
          }
        }),
        app.$axios({
        url:'https://m.maizuo.com/gateway?cityId=440100&pageNum=1&pageSize=12&type=2&k=2520571',
        method: 'get',
        headers:{
'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16082999672528391412580353","bc":"440100"}',
'X-Host': 'mall.film-ticket.film.list'
        }
      })
    ])
    return {
      nowPlaying: request1Data.data.data.films,
      comingSoon: request2Data.data.data.films
    }
 },
  methods: {
    link(id) {
      this.$router.push({ path: `/maizuoDetail/${id}`})
    },
  }
}
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  /*display: flex;*/
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family:
    'Quicksand',
    'Source Sans Pro',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
.datalist{
  width: 100%;
}
.datalist ul li{
  width: 30%;
  height: 80px;
  margin: 3px;
  border-radius: 4px;
  overflow: hidden;
  float: left;
  border: 1px solid #666666;
}
</style>
